<template>
	<view class="coupon-select-packbox relative">
		<comMask v-model="isSetShowPopup" :isNeedReadedClose="isAllowClose">
			<view :class="['select-popup', 'relative']" 
			:style="{ height: height }">
				
				<image class="bg" 
					v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="titleSrc || `${commonConfigs.domainFrontFileLink}/files/images/coupons/select-popup-bg.png`" 
					mode=""></image>
				
				<view class="relative" style="padding: 22rpx;height: 100%;z-index: 100;">
					<slot name="title"></slot>
					
					<view
						class="flex-all-center flex-direction-column"
						style="word-wrap: break-word;word-break:break-all;height:100%;">
						<slot></slot>
					</view>
					
					<slot name="footer"></slot>
				</view>
				
				<view class="absolute" style="left: 0;top: 0;z-index: 1000;width: 100%;height: 100%;"
					v-if="$slots.root">
					<slot name="root"></slot>
				</view>
			</view>
		</comMask>
	</view>
</template>

<script>
	export default {
		name: "comOperCouponPopup",
		props: {
			titleSrc: {
				type: String,
				default: () => ''
			},
			height: {
				type: String,
				default: () => '360rpx'
			},
			isNeedReadedClose: {
				type: Boolean,
				default: () => true,
			},
			isAllowedClickMaskClose: {
				type: Boolean,
				default: () => true,
			},
			value: {
				type: Boolean,
				default: () => true
			},
		},
		data() {
			return {

			}
		},
		computed: {
			isAllowClose() {
				return this.isAllowedClickMaskClose || this.isNeedReadedClose
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			isSetShowPopup: {
				get() {
					return this.value
				},
				set(v) {
					console.log(v)
					this.$emit('input', v)
				},
			},
		},
		methods: {
			scrolltolower(v) {
				this.$emit('scrolltolower', v)
			},		
		},
	}
</script>

<style lang="scss" scoped>
	.coupon-select-packbox {
		color: #fff;
		z-index: 100000;
		
		.select-popup {
			width: 680rpx;
			height: 440rpx;
			left: 0;
			z-index: 1000;
			transition: .4s all;
		}
		
	}
</style>
